<template>
  <div class="app-container">
      <!-- 策略基本信息 -->
    <div class="cqt-box-item">
        <h3>策略基本信息<el-button type="text" v-if="strategyShow" @click="strategyShow = false">隐藏</el-button><el-button type="text" v-else @click="strategyShow = true">显示</el-button></h3>
        <el-table
            :data="strategyInfo"
            border
            stripe
            v-show="strategyShow"
            style="width:100%">
            <el-table-column
                prop="id"
                label="策略ID"
                align="center"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="策略名"
                align="center"
                width="180">
            </el-table-column>
            <el-table-column
                prop="jarName"
                align="center"
                label="jar包名">
            </el-table-column>

            <el-table-column
                prop="params"
                align="center"
                label="策略入口类名">
            </el-table-column>

            <el-table-column
                prop="email"
                align="center"
                label="管理者Email">
            </el-table-column>

            <el-table-column
                label="操作"
                align="center">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEditStrategyBasic(scope.$index, scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <!-- 对应策略基本信息编辑 -->
    <el-dialog title="策略基本信息编辑" :visible.sync="dialogStrategyFormVisible">
        <el-form :model="strategyForm">
            <el-form-item label="策略名称" label-width="120px">
                <el-input @change="HaveStrategyName" v-model="strategyForm.name" auto-complete="off" ></el-input>
            </el-form-item>

            <el-form-item label="策略jar包名" label-width="120px">
                <el-input v-model="strategyForm.jarName" auto-complete="off" ></el-input>
            </el-form-item>

             <el-form-item label="策略入口类名" label-width="120px">
                <el-input v-model="strategyForm.params" auto-complete="off" ></el-input>
            </el-form-item>

            <el-form-item label="策略管理者Email" label-width="120px">
                <el-input v-model="strategyForm.email" auto-complete="off" ></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogStrategyFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitStrategyBasic">确 定</el-button>
        </div>
    </el-dialog>


      <!-- 策略的交易所 -->
    <div class="cqt-box-item">
        <h3>策略的交易所<el-button type="text" 
        v-if="exchangeShow" @click="exchangeShow = false">隐藏
        </el-button><el-button type="text" v-else @click="exchangeShow = true">显示</el-button>
        <el-button type="primary" size="mini" @click="handleAddExchange()" >添加<i class="el-icon-upload el-icon--right"></i></el-button>
        </h3>
        <el-table
            :data="exchangeData"
            border
            stripe
            v-show="exchangeShow"
            style="width:100%">
            <el-table-column
                prop="id"
                label="交易所ID"
                align="center"
                width="180">
            </el-table-column>

            <el-table-column
                prop="name"
                label="交易所名"
                align="center"
                width="180">
            </el-table-column>

            <el-table-column
                align="center"
                label="所选交易对">
                <template scope="scope">
                    <el-tag size="mini" v-for="item in scope.row.coinPairs">{{ item }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column
                prop="alias"
                label="交易所别名"
                align="center"
                width="180">
            </el-table-column>

            <el-table-column
                label="操作"
                align="center">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEditExchange(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDeleteExchange(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <!-- 交易信息的新增 -->
    <el-dialog title="交易新增" :visible.sync="dialogAddExchangeFromVisible">

        <el-form :model="nullObject">
              <el-form-item label="可选交易所" label-width="120px">
                    <el-select v-model="nullString" @change="changeExchange" placeholder="configForm.type">
                        <el-option
                            v-for="item in allExchanges"
                            :key="item.id"
                            :label="item.alias"
                            :value="item.id"
                            :disabled="item.disabled">
                        </el-option>
                    </el-select>
            </el-form-item> 
        </el-form>

        <el-form :model="nullObject">
             <el-form-item label="交易所ID" label-width="120px">
                <el-input v-model="AddExchangeForm.id" auto-complete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="交易所名称" label-width="120px">
                <el-input v-model="AddExchangeForm.name" auto-complete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="交易对" label-width="120px">
                <el-select v-model="AddExchangeForm.coinPairs" multiple placeholder="请选择对应交易对" style="width:100%">
                    <el-option
                        v-for="item in AddExchangeForm.coinPairs"
                        :key="item"
                        :label="item"
                        :value="item">
                    </el-option>
                </el-select>
            </el-form-item>



        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogAddExchangeFromVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitExchangeAdd">确 定</el-button>
        </div>
    </el-dialog>

     <!-- 交易所信息编辑 -->
    <el-dialog title="交易所资料编辑" :visible.sync="dialogExchangeFormVisible">
        <el-form :model="exchangeForm">
            <el-form-item label="交易所ID" label-width="120px">
                <el-input v-model="exchangeForm.id" auto-complete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="交易所名称" label-width="120px">
                <el-input v-model="exchangeForm.alias" auto-complete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="交易对" label-width="120px">
                <el-select v-model="exchangeForm.coinPairs" multiple placeholder="请选择对应交易对" style="width:100%">
                    <el-option
                        v-for="item in exchangeForm.totalCoinPairs"
                        :key="item"
                        :label="item"
                        :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogExchangeFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitExchange">确 定</el-button>
        </div>
    </el-dialog>

  
    <!-- 策略配置信息 -->
    <div class="cqt-box-item">
        <h3>策略配置信息<el-button type="text" v-if="strategyConfigShow" @click="strategyConfigShow = false">隐藏</el-button>
        <el-button type="text" v-else @click="strategyConfigShow = true">显示</el-button>
        <el-button type="primary" size="mini" @click="handleAddConfig()" >添加<i class="el-icon-upload el-icon--right"></i></el-button>
        </h3>
        <el-table
            :data="strategyConf"
            border
            stripe
            v-show="strategyConfigShow"
            style="width:100%">
            <el-table-column
                prop="name"
                label="配置名"
                align="center">
            </el-table-column>

            <el-table-column
                prop="value"
                label="配置参数"
                align="center">
                <!-- <template slot-scope="scope">
                    {{ scope.row.type == 'json' ? JSON.stringify(scope.row.value) : scope.row.value }}
                </template> -->
            </el-table-column>

            <el-table-column
                prop="type"
                label="数据类型"
                align="center">
            </el-table-column>


            <el-table-column
                prop="describe"
                align="center"
                label="配置说明">
            </el-table-column>
            <el-table-column
                label="操作"
                align="center">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEditConfig(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDeleteConfig(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <!-- 新增策略配置信息-->
    <el-dialog title="策略配置信息新增" :visible.sync="dialogConfigAddFormVisible">
        <el-form :model="AddconfigForm">
            <el-form-item label="配置名" label-width="120px">
                <el-input @change="checkConfigNameIsHave" v-model="AddconfigForm.name" auto-complete="off" ></el-input>
            </el-form-item>

            <el-form-item label="配置参数" label-width="120px">
                <el-input @change="checkConfigValueIsNull" type="textarea" :autosize="{ minRows: 3, maxRows: 20}" v-model="AddconfigForm.value" auto-complete="off" ></el-input>
            </el-form-item>

             <el-form-item label="数据类型" label-width="120px">
                <el-select @change="ChangeAddCSVConfig" v-model="AddconfigForm.type" placeholder="请选择">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
                </el-select>

         <el-button v-if="showCSVConfig" type="primary" size="mini" @click="handleAddCSVConfig()" >csv文件配置<i class="el-icon-upload el-icon--right"></i></el-button>
            </el-form-item> 

    
            <el-form-item label="配置说明" label-width="120px">
                <el-input v-model="AddconfigForm.describe" auto-complete="off" ></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogConfigAddFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitAddConfig">确 定</el-button>
        </div>
    </el-dialog>


    <!-- 策略配置信息编辑 -->
    <el-dialog title="策略配置信息编辑" :visible.sync="dialogConfigFormVisible">
        <el-form :model="configForm">
            <el-form-item label="配置名" label-width="120px">
                <el-input v-model="configForm.name" auto-complete="off" ></el-input>
            </el-form-item>

            <el-form-item label="配置参数" label-width="120px">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 10}" v-model="configForm.value" auto-complete="off" ></el-input>
            </el-form-item>

             <el-form-item label="数据类型" label-width="120px">
                <el-select v-model="configForm.type" placeholder="configForm.type">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled">
                </el-option>
                </el-select>
            </el-form-item> 
            
            <el-form-item label="配置说明" label-width="120px">
                <el-input v-model="configForm.describe" auto-complete="off" ></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogConfigFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitConfig">确 定</el-button>
        </div>
    </el-dialog>


    <!-- 策略配置信息支持CSV文件上传 -->
        <el-dialog title="策略配置信息编辑" :visible.sync="dialogConfigCSVVisible">
          <el-upload
            class="upload-demo"
            action="#"
            :auto-upload="false"
            :on-change="handleChange"
            :file-list="fileList3">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传CSV文件</div>
          </el-upload>

          <div slot="footer" class="dialog-footer">
              <el-button @click="dialogConfigCSVVisible = false">取 消</el-button>
              <el-button type="primary" @click="saveStrategyCSVConfig">确 定</el-button>
          </div>
        </el-dialog>
  
    <el-button   type="success" @click="saveStrategy">保存</el-button>

  </div>
</template>

<script>
import { saveStrategy, isHaveStrategyName } from "@/api/strategy";
import { getAllExchangeInfo } from "@/api/exchange";
import Papa from "papaparse";

export default {
  data() {
    return {
      //csv配置按钮的显示
      showCSVConfig: false,
      fileList3: [],
      dialogConfigCSVVisible: false,

      options: [
        {
          value: "json",
          label: "json",
          disabled: true
        },
        {
          value: "number",
          label: "number",
          disabled: true
        },
        {
          value: "string",
          label: "string",
          disabled: true
        },
        {
          value: "boolean",
          label: "boolean",
          disabled: true
        },
        {
          value: "csv",
          label: "csv",
          disabled: true
        }
      ],

      nullArray: [],
      nullObject: null,
      nullString: null,

      //策略ID
      strategyId: null,
      //策略初始化数据
      strategyData: null,
      //策略的开启状态
      strategyStatus: null,
      //策略是否在重启状态中
      restartStatus: false,
      //策略状态更新是否在进行中
      statusLoading: false,
      //交易所是否显示
      exchangeShow: true,
      //策略对应的交易所信息
      exchangeData: [],
      //策略信息是否显示
      strategyShow: true,
      //策略基本信息
      strategyInfo: [
        {
          id: null,
          name: null,
          jarName: null,
          email: null,
          params: null
        }
      ],
      //策略配置信息是否显示
      strategyConfigShow: true,
      //策略配置信息
      strategyConf: [],

      //存储所有可用交易所信息
      allExchanges: [],
      //缓存交易所信息
      AddExchangeForm: {
        id: null,
        name: null,
        alias: null,
        coinPairs: []
      },
      dialogAddExchangeFromVisible: false,
      dialogExchangeFormVisible: false,
      //策略交易所信息编辑页面缓存数据
      exchangeForm: {
        id: null,
        name: null,
        coinPairs: [],
        totalCoinPairs: []
      },

      //策略基本信息编辑页面是否关闭
      dialogStrategyFormVisible: false,
      //策略基本信息编辑页面缓存数据
      strategyForm: {
        id: null,
        name: null,
        jarName: null,
        email: null,
        params: null
      },

      //策略配置信息新增
      dialogConfigAddFormVisible: false,
      //策略基本信息编辑页面是否关闭
      dialogConfigFormVisible: false,
      AddconfigForm: {
        name: null,
        value: null,
        type: "string",
        describe: null
      },
      //策略配置信息编辑页面缓存数据
      configForm: {
        name: null,
        value: null,
        type: null,
        describe: null
      }
    };
  },

  created() {
    this.init();
  },
  methods: {
    init() {
      // 初始化请求
      this.loadAllExchangeData();
    },

    //加载策略所有信息
    loadAllExchangeData() {
      getAllExchangeInfo().then(response => {
        var data = response.data;
        this.allExchanges = data;
      });
    },

    //添加交易所信息
    handleAddExchange() {
      this.dialogAddExchangeFromVisible = true;
    },

    //触发选择交易所的选择器
    changeExchange(val) {
      for (let i = 0; i < this.allExchanges.length; i++) {
        if (this.allExchanges[i].id == val) {
          this.AddExchangeForm = {
            id: this.allExchanges[i].id,
            name: this.allExchanges[i].name,
            alias: this.allExchanges[i].alias,
            coinPairs: this.allExchanges[i].coinPairs
          };
          break;
        }
      }
    },

    //将添加完的交易所信息加入到要提交的数据集中
    submitExchangeAdd() {
      //为已选择的交易所加上标志
      for (let i = 0; i < this.allExchanges.length; i++) {
        if (this.allExchanges[i].id == this.AddExchangeForm.id) {
          this.allExchanges[i].disabled = true;
          break;
        }
      }

      //判断已选中是否已经存在目前选择的
      if (this.exchangeData.length == 0) {
        this.exchangeData.splice(
          this.exchangeData.length + 1,
          0,
          this.AddExchangeForm
        );
        this.dialogAddExchangeFromVisible = false;
      } else {
        for (let i = 0; i <= this.exchangeData.length; i++) {
          if (this.exchangeData[i].id == this.AddExchangeForm.id) {
            this.exchangeData.splice(i, this.AddExchangeForm);
            this.dialogAddExchangeFromVisible = false;
            break;
          } else {
            this.exchangeData.splice(
              this.exchangeData.length + 1,
              0,
              this.AddExchangeForm
            );
            this.dialogAddExchangeFromVisible = false;
          }
        }
      }
    },

    //删除添加的交易所
    handleDeleteExchange(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // TODO 删除
          this.exchangeData.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    //交易所编辑页面（处理器）
    handleEditExchange(index, row) {
      let totalCoinPairs;
      for (let i = 0; i < this.allExchanges.length; i++) {
        if (this.allExchanges[i].id == row.id) {
          totalCoinPairs = this.allExchanges[i].coinPairs;
          break;
        }
      }
      //TODO 存在BUG
      this.exchangeForm = {
        id: row.id,
        name: row.name,
        coinPairs: row.coinPairs,
        index: index,
        totalCoinPairs: totalCoinPairs
      };
      this.dialogExchangeFormVisible = true;
    },

    //更新策略对应的交易所信息
    submitExchange() {
      // 进行修改或者新增
      this.$message("操作成功!");
      this.exchangeData[
        this.exchangeForm.index
      ].coinPairs = this.exchangeForm.coinPairs;
      this.dialogExchangeFormVisible = false;
    },

    //策略基本信息编辑页面(处理器)
    handleEditStrategyBasic(index, row) {
      //始终等于第一个参数
      this.strategyForm = this.strategyInfo[0];
      this.dialogStrategyFormVisible = true;
    },

    //更新策略的基本信息
    submitStrategyBasic() {
      //进行空值校验
      if (this.strategyForm.name == null || this.strategyForm.name == "") {
        alert("策略名不能为空！");
        return;
      }
      if (
        this.strategyForm.jarName == null ||
        this.strategyForm.jarName == ""
      ) {
        alert("策略jar包不能为空！");
        return;
      }
      if (this.strategyForm.params == null || this.strategyForm.params == "") {
        alert("策略入口类名不能为空！");
        return;
      }
      if (this.strategyForm.email == null || this.strategyForm.email == "") {
        alert("策略通知Email不能为空！");
        return;
      }

      //TODO该方法可进行更新或者新增
      this.$message("操作成功");
      this.strategyInfo = [this.strategyForm];
      this.dialogStrategyFormVisible = false;
    },

    //新增策略配置信息
    handleAddConfig() {
      this.dialogConfigAddFormVisible = true;
    },

    //新增的提交
    submitAddConfig() {
      //校验是否为空
      //判断是否为空
      if (this.AddconfigForm.name == "" || this.AddconfigForm.name == null) {
        alert("该参数名称不能为空！");
        this.AddconfigForm.name = "";
        return;
      }

      for (let i = 0; i < this.strategyConf.length; i++) {
        if (this.AddconfigForm.name == this.strategyConf[i].name) {
          alert("该参数名称已被占用！请您重新命名！");
          this.AddconfigForm.name = "";
          return;
        }
      }

      if (this.AddconfigForm.value == "" || this.AddconfigForm.value == null) {
        alert("该参数名称不能为空！");
        this.AddconfigForm.value = "";
        return;
      }

      //校验数据类型
      if (this.AddconfigForm.type == "string") {
        if (!this.checkString(this.AddconfigForm.value)) {
          this.AddconfigForm.value = "";
          return;
        }
      } else if (this.AddconfigForm.type == "number") {
        if (!this.checkNumber(this.AddconfigForm.value)) {
          this.AddconfigForm.value = "";
          return;
        }
      } else if (this.AddconfigForm.type == "json") {
        if (!this.checkJsonString(this.AddconfigForm.value)) {
          this.AddconfigForm.value = "";
          return;
        }
      }

      //新增配置信息
      this.strategyConf.splice(
        this.strategyConf.length + 1,
        0,
        this.AddconfigForm
      );
      this.AddconfigForm = {
        name: null,
        value: null,
        type: null,
        describe: null
      };
      this.dialogConfigAddFormVisible = false;
    },

    //删除配置信息
    handleDeleteConfig(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          //准备参数
          //先将该参数删除之后将所有配置信息重新提交
          this.strategyConf.splice(index, 1);
          // TODO 发出删除请求
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    //策略配置信息编辑页面(处理器)
    handleEditConfig(index, row) {
      this.configForm = {
        name: row.name,
        value: row.value,
        type: row.type,
        describe: row.describe,
        index: index
      };
      this.dialogConfigFormVisible = true;
    },

    //更新策略配置信息
    submitConfig() {
      (this.strategyConf[this.configForm.index].name = this.configForm.name),
        (this.strategyConf[this.configForm.index].type = this.configForm.type),
        (this.strategyConf[
          this.configForm.index
        ].value = this.configForm.value),
        (this.strategyConf[
          this.configForm.index
        ].describe = this.configForm.describe);

      this.dialogConfigFormVisible = false;
      this.configForm = {
        name: null,
        value: null,
        type: null,
        describe: null
      };
    },

    //保存整体的策略信息
    saveStrategy() {
      //进行空值校验;
      if (this.strategyForm.name == null || this.strategyForm.name == "") {
        alert("策略基本信息不能为空！");
        return;
      }
      if (
        this.strategyForm.jarName == null ||
        this.strategyForm.jarName == ""
      ) {
        alert("策略基本信息不能为空！");
        return;
      }
      if (this.strategyForm.params == null || this.strategyForm.params == "") {
        alert("策略基本信息不能为空！");
        return;
      }
      if (this.strategyForm.email == null || this.strategyForm.email == "") {
        alert("策略基本信息不能为空！");
        return;
      }

      var exchanges = [{ exchangeId: null, pairas: null }];
      //格式化交易所数据
      for (let i = 0; i < this.exchangeData.length; i++) {
        var temp = {
          exchangeId: null,
          pairs: null
        };
        temp.exchangeId = this.exchangeData[i].id;
        temp.pairs = this.exchangeData[i].coinPairs.join(",");
        exchanges[i] = temp;
      }

      //策略基本信息数据
      var strategyInfo = this.strategyInfo[0];

      //格式化策略对应的配置信息数据
      for (let i = 0; i < this.strategyConf.length; i++) {
        this.strategyConf[i].name = this.strategyConf[i].name;
        this.strategyConf[i].value =
          this.strategyConf[i].type == "json"
            ? JSON.parse(this.strategyConf[i].value)
            : this.strategyConf[i].type == "number"
              ? parseFloat(this.strategyConf[i].value)
              : this.strategyConf[i].value;
        this.strategyConf[i].type = this.strategyConf[i].type;
      }
      var configs = this.strategyConf;

      //将参数配置合并到策略信息中
      strategyInfo.configs = JSON.stringify(configs);

      var data = {
        exchanges: exchanges,
        strategyInfo: strategyInfo
      };

      saveStrategy(data)
        .then(response => {
          this.$message("操作成功!");

          //转向策略列表
          this.$router.push({ path: "/strategy/list" });
        })
        .catch(err => {
          this.$message = err.msg;
        });
    },

    /**
     * 校验String类型数据
     */
    checkString(param) {
      if (!typeof param == "string") {
        alert("数据类型不符!请重新输入");
        param = "";
        return false;
      }

      return true;
    },

    /**
     * 校验number类型数据
     */
    checkNumber(param) {
      try {
        //判断是否为数字类型
        if (!isNaN(parseFloat(param))) {
          return true;
        }
      } catch (e) {}

      alert("数据类型不符!请重新输入");
      return false;
    },

    /**
     * 校验json类型数据
     */
    checkJsonString(str) {
      try {
        if (typeof JSON.parse(str) == "object") {
          return true;
        }
      } catch (e) {}
      alert("数据类型不符!请重新输入");
      return false;
    },

    /**
     * 校验新增策略名是否存在
     */
    HaveStrategyName(val) {
      isHaveStrategyName(val).then(response => {
        if (response.data) {
          alert("策略名已存在，请您重新命名！");
          this.strategyForm.name = "";
          return;
        }
      });
    },

    /**
     *校验策略配置名是否已经存在
     */
    checkConfigNameIsHave(val) {
      //判断是否为空
      if (val == "" || val == null) {
        alert("该参数名称不能为空！");
        this.AddconfigForm.name = "";
        return;
      }

      for (let i = 0; i < this.strategyConf.length; i++) {
        if (val == this.strategyConf[i].name) {
          alert("该参数名称已被占用！请您重新命名！");
          this.AddconfigForm.name = "";
          return;
        }
      }
    },

    /**
     *校验策略配置名是否已经存在
     */
    checkConfigValueIsNull(val) {
      //判断是否为空
      if (val == "" || val == null) {
        alert("该参数值不能为空！");
        this.AddconfigForm.value = "";
        return;
      }
    },

    /**
     * 上传csv文件
     */
    handleChange(file, fileList) {
      this.fileList3 = fileList.slice(-1);
    },

    /**
     * 上传CSV文件
     */
    handleAddCSVConfig() {
      this.dialogConfigCSVVisible = true;
    },

    /**
     * 解析CSV文件内容
     */
    saveStrategyCSVConfig() {
      var Filename = this.fileList3[0].url,
        self = this;

      var value = Papa.parse(Filename, {
        download: true,
        encoding: "",
        skipEmptyLines: true,
        complete: function(results) {
          var data = results.data;
          var strList;
          for (let i = 0; i < data.length; i++) {
            var str;
            var strData = data[i];
            if (i == 0) {
              strList = strData + " \n ";
              continue;
            }

            strList += strData + " \n ";
          }
          value = strList.trim();

          //为配置参数的值赋值
          self.AddconfigForm.value = value;

          //退出文件上传页面
          self.dialogConfigCSVVisible = false;

          //改变参数类型为csv格式
          self.AddconfigForm.type = "csv";
        }
      });
    },

    /**
     * 当选择类型为CSV时按钮才显示
     */
    ChangeAddCSVConfig(val) {
      if (val == "csv") {
        this.showCSVConfig = true;
      } else {
        this.showCSVConfig = false;
      }
    }
  }
};
</script>

<style scoped>
.line {
  text-align: center;
}
.cqt-box-item h3 > button {
  margin-left: 20px;
}
.cell .el-tag {
  margin-left: 2px;
  margin-right: 2px;
}
.el-pagination {
  margin-top: 20px;
}
.el-table {
  margin-bottom: 60px;
}
.cqt-caption {
  font-size: 14px;
  color: #ccc;
  padding: 10px 20px;
  background-color: #f7f7f7;
  border-radius: 4px;
  margin: 0;
}
</style>
